<template>
    <!-- 待签署合同 -->
    <div class="gd-main" style="padding:0;">
        <el-row type="flex" :gutter="20" style="margin-top:20px;">
            <el-col :span="6">
                <div class="md-statics1-item" style="margin:0;">
                    <!-- 需要使用花括弧把 data 属性的数据填入 html 元素的文本 -->
                    <div>{{projectCount}}</div>
                    <div>项目数</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="md-statics1-item" style="margin:0;background-color:#ccffff;">
                    <!-- 需要使用花括弧把 data 属性的数据填入 html 元素的文本 -->
                    <div>{{unsignedContractCount}}</div>
                    <div>待签订合同数</div>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" style="margin-top:20px;">
            <el-col :span="18">
                <!-- 项目搜索 -->
                <!-- 表单配置
                    :rules - "rules" 验证规则对象 在 data() 中配置
                    <el-form-item> 标签
                           prop="projectName" 配置此属性，需要验证
                -->
                <el-form 
                    style="margin-top:0;" 
                    ref="form" 
                    :model="form" 
                    label-position="left"
                    label-width="80px">
                    <!-- 项目名称 -->
                    <el-col :span="10">
                        <el-form-item label="项目名称" style="margin-bottom:20px !important;">
                            <el-input v-model="form.projectName" placeholder="输入项目"></el-input>   
                        </el-form-item>
                    </el-col>
                    <!-- 项目状态 -->
                    <el-col :span="10">
                        <el-form-item label="项目状态" style="margin-bottom:20px !important;">
                            <el-select style="width:100%" v-model="form.projectStatus" placeholder="选择项目状态">
                                <el-option 
                                    v-for="option in projectStatusOptions"
                                    :key="option.value"
                                    :label="option.label" 
                                    :value="option.value"></el-option>
                            </el-select>
                        </el-form-item>  
                    </el-col>
                    <el-col :span="4">
                        <el-button style="width:100%;" type="primary" @click="onSubmit('form')">搜索</el-button>
                    </el-col>
                </el-form>
            </el-col>
            <!-- 查看已取消合同 -->
            <el-col :span="6">
                <router-link to="/subcontract/refused" tag="div">
                    <el-button style="width:100%;" type="primary">查看已拒绝合同</el-button>
                </router-link>
            </el-col>
        </el-row>
        <!-- table表格 -->
        <!-- 
            @表格配置
                1. <el-table> 标签
                    1.1 :data - "tableData"
                        1.1.1 tableData 为对象数组，拿到服务器器的数据进行赋值
                        1.1.2 tableData 要在 data() 方法返回的 对象里配置，初始值设置为 [] 空数组
                2. <el-table-column> 标签
                    2.1 prop - "projectName" 列的属性名， tableData 里的对象的属性 
                    2.2 lable - "项目" 列的名称
                    2.3 width - "360" 列的宽度
        -->
        <!-- 
            height: 100vh   - 70px(面包屑+底部滚动条) 
                            - 20px(上内填充) 
                            - 41px(选项卡) 
                            -144px(数据版) 
                            -80px(搜索表单) 
                            -52px(底部页码)
        -->
        <el-table :data="tableData" height="calc(100vh - 407px)">
            <el-table-column prop="projectStatus" label="项目状态" width="100"></el-table-column>
            <el-table-column prop="projectName" label="项目" width="220"></el-table-column>
            <el-table-column prop="originatorName" label="总承包单位" width="220"></el-table-column>
            <el-table-column width="200" label="操作">
                <template slot-scope="scope">
                    <!-- 事件定义 -->
                    <!--
                        事件声明: @click - "signedContract(scope.row)"
                        click - 事件类型
                        signedContract - click事件函数, 可传递的参数 scope.row,scope.column,scope.$index,scope.store
                    -->
                    <el-button type="text" @click="unsignedContract(scope.row)">查看待签订合同</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!--
            @分页配置
                :total - pagination.total 总条数
                :pager-count="7"显示的页码按钮数量, 大于等于 5 <= 21 基数
                :current-page = "pagination.currentPage" 当前的选中的页码
                :page-size="10" 每页显示的条目数
                :page-sizes="" 可选则的每页显示的条目数
                layout="total, sizes, prev, pager, next, jumper" 显示的元素
                @size-change="handleSizeChange"  - handleSizeChange 每页的条数改变时触发，参数为选择的条数
                @current-change="handleCurrentChange" - handleCurrentChange methods 配置 参数为点击的页码，或者输入的页码  
        -->
        <el-pagination 
            style="margin-top:20px;" 
            :total="pagination.total"
            :pager-count="pagination.pageCount"
            :current-page="pagination.currentPage" 
            :page-sizes="pagination.pageSizes" 
            :page-size="pagination.pageSize" 
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange"
            >
        </el-pagination>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    //引入 ajax 请求的方法
    import {prjectContract} from '@/request/team';
    import {queryContractProjectNum} from '@/request/team';
    export default {
        computed:{
            //登录后的数据在这里进行给实例赋值，就可以用 this.xxx 进行访问了
          ...mapGetters(['userId','currId','roleId','verificationStatus'])  
        },
        // 页面上需要展示的数据都要在 [data方法] 的 return 语句返回的对象里存在声明，否则会报错 
        data() {
            return {
                //项目数量
                projectCount: 0,
                //待签订合同数
                unsignedContractCount: 0,
                //表单数据 - 项目名称
                form:{
                    projectName: '',
                    //表单 - 项目状态
                    projectStatus: ''
                },
                //表单下拉框 - 项目状态选项
                projectStatusOptions: [{
                    value: '01',
                    label: '进行中'
                }, {
                    value: '03',
                    label: '已结束'
                }],
                //表格数据
                tableData: [{
                        projectStatus: '',
                        projectName: '',
                        originatorName: ''
                    }],
                //分页配置
                pagination: {
                    //总数据 - 查询一次后服务器进行返回
                    total:200,
                    //页码按钮数量
                    pagerCount:7,
                    //当前选中的页码
                    currentPage: 1,
                    //可选的每页显示数量
                    pageSizes:[10,20,30,40,50],
                    //每页显示的数量
                    pageSize:10
                }
            }
        },
        methods: {
            //提交表单
            onSubmit(formRef){
                this.$refs[formRef].validate((valid) => {
                    //验证通过
                    if(valid){
                        console.log('表单项验证通过');
                        //进行相关操作 - 查询数据
						var _this = this;
						//调用接口进行初始数据查询
						var queryObj = { 
						    userId:this.userId,
							
							projectName:this.form.projectName,
							
							projectStatus:this.form.projectStatus,
						    //当前页
						    page:this.pagination.currentPage,
						    //每页显示的条数
						    limit:this.pagination.pageSize,
						    //合同状态 - 待签订
						    contractType:-1,
						    //合同类型 - 班组
						    originatorType:2,
						    //请求类型 - 分包
						    sourceType:1
						};
						//进行查询
						prjectContract(queryObj).then(function(res){
						    console.log(res);
							_this.tableData = res.data.result;
						_this.pagination.total = res.data.resultTotal;
						});
						
						queryContractProjectNum(queryObj).then(function(res){
						    console.log(res);
							_this.projectCount = res.data.projectNum;
							_this.unsignedContractCount = res.data.contractNum;
						
						});
                    }
                });
            },
            //切换每页显示的数量量
            handleSizeChange(val) {
                console.log('每页显示' + val + '条数据');
                //进行相关操作 - 查询数据
            },
            //选中的页码
            handleCurrentChange(val) {
                console.log('点击了第 ' + val + '页');
                //进行相关操作 - 查询数据
            },
            //查看待签订合同列表 - 跳转至 【路由path】: /subcontract/unsignedContract - 【路由name】: UnsignedSubcontract
            unsignedContract(curRow){
                //根据参数进行跳转
                this.$router.push({
                    //跳转至 【待签订合同列表 页】
                    name:'UnsignedSubcontract',
                    //查询对象 - 传递必要的参数
                    query:{
                        //示例: test1 & test2 为跳转至 【待签订合同列表 页】传递的参数
                        //【待签订合同列表 页】调用 this.$route.query 即可获得此对象
                        projectName:curRow.projectName,
                        originatorName:curRow.originatorName,
						projectId:curRow.projectId
                    }
                });
            }
        },
        //vue 实例的模版渲染完成后执行
        mounted() {
            var _this = this;
            //调用接口进行初始数据查询
            var queryObj = { 
                userId:this.userId,
				
				projectName:this.form.projectName,
				
				projectStatus:this.form.projectStatus,
                //当前页
                page:this.pagination.currentPage,
                //每页显示的条数
                limit:this.pagination.pageSize,
                //合同状态 - 待签订
                contractType:-1,
                //合同类型 - 班组
                originatorType:2,
                //请求类型 - 分包
                sourceType:1
            };
            //进行查询
            prjectContract(queryObj).then(function(res){
                console.log(res);
				_this.tableData = res.data.result;
			_this.pagination.total = res.data.resultTotal;
            });
			
			queryContractProjectNum(queryObj).then(function(res){
			    console.log(res);
				_this.projectCount = res.data.projectNum;
				_this.unsignedContractCount = res.data.contractNum;
			
			});
        }
    }
</script>

<style lang="less" scoped>

</style>